<template>
  <el-row :gutter="20">
    <el-col :xs="12" :sm="6" :md="4" :lg="3" :xl="3" class="xt-app-main-panel" v-for="(item,index) in panelList"
            :key="index">
      <div class="xt-app-main-panel-left">
        <span>{{ item.name }}</span>
      </div>
      <div class="xt-app-main-panel-center">
        <span>{{ item.data }}</span>
      </div>
      <div class="xt-app-main-panel-right">
        <span>{{ item.type }}</span>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: "Card",
    data() {
      return {
        panelList: [
          {
            name: '总订单',
            data: 256,
            type: '单'
          },
          {
            name: '销售额',
            data: 256,
            type: '元'
          },
          {
            name: '销售额',
            data: 256,
            type: '单'
          }
        ]
      };
    },
  }
</script>

<style scoped>

</style>
